<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 字体 */
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center; /* 内容居中 */
            justify-content: center; /* 垂直居中 */
            min-height: 100vh; /* 至少占满视口高度 */
            /*背景图片*/
            background-image: url("img/1.webp");
            background-size: 600px; /* 背景图片大小 */
            background-position: center; /* 背景图片位置 */
            background-color: #f5f5f5; /* 背景颜色 */
            color: #333; /* 字体颜色 */
        }

        h1 {
            font-size: 3em; /* 主标题字体大小 */
            margin: 20px 0; /* 上下边距 */
            color: #007bff; /* 主标题颜色 */
        }

        h2 {
            font-size: 2em; /* 子标题字体大小 */
            color: #007bff; /* 子标题颜色 */
            margin-bottom: 15px; /* 下边距 */
            text-align: center;
        }

        ul {
            list-style-type: none; /* 移除默认列表样式 */
            padding: 0; /* 无内边距 */
            margin: 0; /* 无外边距 */
            background: white; /* 列表背景 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            max-width: 400px; /* 最大宽度 */
            width: 100%; /* 宽度为100% */
            text-align: center;
        }

        li {
            padding: 15px; /* 列表项内边距 */
            transition: background-color 0.3s; /* 背景颜色过渡 */
            text-align: center;
        }

        li:hover {
            background-color: #e9ecef; /* 悬停时背景颜色 */
        }

        a {
            text-decoration: none; /* 移除下划线 */
            color: #007bff; /* 链接颜色 */
            font-weight: bold; /* 加粗 */
        }

        a:hover {
            text-decoration: underline; /* 悬停时显示下划线 */
        }

        footer {
            margin-top: 20px; /* 上边距 */
            font-size: 0.9em; /* 较小字体 */
            color: #007bff; /* 较浅颜色 */
            text-align: center; /* 居中 */
        }
    </style>
</head>
<body>
    <h1>首页</h1>
    <ul>
        <h2>功能列表:</h2>
        <li><a href="riqijisuan.html">日期计算器</a></li>
        <li><a href="daikuan.html">房贷计算器</a></li>
        <li><a href="xuexingjisuan.html">血型计算器</a></li>
        <li><a href="geshui.html">个税计算器</a></li>
        <li><a href="bmizhishu.html">BMI指数测试器</a></li>
        <li><a href="shengao.html">儿童身高预测器</a></li>
        <footer>
        <p>© 2024 周露航</p>
    </footer>
    </ul>
    
</body>
</html>
